var widthPie=960;
var heightPie=400;
var outerRadius=widthPie/2;
var innerRadius=0;
var is_pie_rendered=0;
function renderPieFull()
{
    if(is_pie_rendered>0)
	return;
    document.getElementById("pieHeading").innerHTML="OS FRAGMENTATION";
    renderPie();
    is_pie_rendered++;
}


function renderPie()
{
    
    // Sample data sets for pie charts
    var pie1Dataset=[20,30,50];
    var pie2Dataset=[40,30,20,10];
    var OSLaptops=["MAC","LINUX","WINDOWS"];
    var OSPhones=["ANDROID","IOS","WINDOWS","BLACKBERRY"];
    var svgpie = d3.select("body").append("svg")
	.attr("width", widthPie + margin.left + margin.right)
	.attr("height", heightPie + margin.top + margin.bottom);

                 
        
    var grad=Math.PI/180;
    var arc1 = d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(20+(outerRadius/4));
    
    var pie1 = d3.layout.pie().startAngle(-180*grad).endAngle(180*grad);   
                 
    var arcs1 = svgpie.selectAll("g.arc1")
	.data(pie1(pie1Dataset))
	.enter()
	.append("g")
	.attr("class", "arc1")
	.attr("transform", "translate(" +(widthPie-300)/4+ "," + (heightPie + margin.top + margin.bottom)/2+ ")");
     
    function tweenFunc(val)
    {
	var a = d3.interpolate({startAngle: -180*grad, endAngle: 180*grad},val);
	this._current = a(0);
	return function(t) 
	    {
		return arc1(a(t));
	    };
    }
    
    //Draw arc paths
    var path1=arcs1.append("path")
	.attr("fill", function(d, i) {
		return color(i+2);
	    })
	.attr("d", arc1)
	.each(function(d) { this._current = d; }); 
         
        
    path1.transition()
	.duration(2000)
	.delay(1500).ease("spiral");
     
    //Labels
    arcs1.append("text")
	.transition()
	.delay(function(d,i) {return i*2;})
	.duration(500)
	.ease("spiral")
	.attr("transform", function(d) {
		return "translate(" + arc1.centroid(d) + ")";
	    })
	.attr("text-anchor", "middle")
	.text(function(d,i)
	      { return OSLaptops[i];});
     
     
    var arc2 = d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius/4);

    var pie2 = d3.layout.pie().startAngle(-180*grad).endAngle(180*grad);   
    var newArray2=[0,0];
       
    var arcs2 = svgpie.selectAll("g.arc2")
	.data(pie2(pie2Dataset))
	.enter()
	.append("g")
	.attr("class", "arc2")
	.attr("transform", "translate(" +(widthPie)/2+ "," + (heightPie + margin.top + margin.bottom)/2+ ")");
     
    function tweenFunc(val)
    {
	var a = d3.interpolate({startAngle: -180*grad, endAngle: 180*grad},val);
	this._current = a(0);
	return function(t) {
	    return arc2(a(t));
	};
    }
    
    //Draw arc paths
    var path2=arcs2.append("path")
	.attr("fill", function(d, i) 
	      {
		  return color(i+4);
	      })
	.attr("d", arc1)
	.each(function(d) { this._current = d; }); 
 
        
    path2.transition()
	.duration(2000)
	.delay(1500).ease("spiral");
      
        
    //Labels
    arcs2.append("text")
	.transition()
	.delay(function(d,i) {return i*2;})
	.duration(500)
	.ease("spiral")
	.attr("transform", function(d) {
		return "translate(" + arc2.centroid(d) + ")";
	    })
	.attr("text-anchor", "middle")
	.text(function(d,i)
	      { return OSPhones[i];}
	      );
    
        
}//end of function transitionPie()
